<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="Template_files/cubeportfolio.min.css">
    <script src="Template_files/jquery.min.js"></script>
    <script src="Template_files/jquery.cubeportfolio.min.js"></script>
</head>

<body>
    <ul id="filterControls" class="list-inline cbp-l-filters-alignRight text-center">
        <li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter="*">All</li>
        <li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter=".branding">Branding</li>
        <li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter=".abstract">Abstract</li>
        <li class="list-inline-item cbp-filter-item u-cubeportfolio__item" data-filter=".graphic">Graphic</li>
        <li class="list-inline-item cbp-filter-item u-cubeportfolio__item cbp-filter-item-active" data-filter=".illustration">Illustration</li>
    </ul>
    <div id="test">
        <div class="cbp-item graphic">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img1.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Remind Me More</h4>
                        <p class="small mb-0">
                            by Tiberiu Neamu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item branding">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img2.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Workout Buddy</h4>
                        <p class="small mb-0">
                            by Tiberiu Neamu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item abstract illustration">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img3.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Tiger</h4>
                        <p class="small mb-0">
                            by Cosmin Capitanu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item abstract illustration">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img5.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Tiger</h4>
                        <p class="small mb-0">
                            by Cosmin Capitanu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item graphic illustration">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img4.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Tiger</h4>
                        <p class="small mb-0">
                            by Cosmin Capitanu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item graphic illustration">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img6.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Tiger</h4>
                        <p class="small mb-0">
                            by Cosmin Capitanu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item branding">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img18.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Workout Buddy</h4>
                        <p class="small mb-0">
                            by Tiberiu Neamu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item abstract illustration">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img12.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Tiger</h4>
                        <p class="small mb-0">
                            by Cosmin Capitanu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item graphic">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img15.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Remind Me More</h4>
                        <p class="small mb-0">
                            by Tiberiu Neamu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item branding">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img17.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Workout Buddy</h4>
                        <p class="small mb-0">
                            by Tiberiu Neamu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item branding">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img16.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Workout Buddy</h4>
                        <p class="small mb-0">
                            by Tiberiu Neamu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item graphic">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img26.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Remind Me More</h4>
                        <p class="small mb-0">
                            by Tiberiu Neamu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item abstract">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img28.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Remind Me More</h4>
                        <p class="small mb-0">
                            by Tiberiu Neamu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item branding">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img27.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Workout Buddy</h4>
                        <p class="small mb-0">
                            by Tiberiu Neamu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item branding">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img30.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Workout Buddy</h4>
                        <p class="small mb-0">
                            by Tiberiu Neamu
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!-- End Item -->

        <!-- Item -->
        <div class="cbp-item graphic">
            <div class="cbp-item-wrapper">
                <a class="cbp-caption" href="https://htmlstream.com/preview/front-v1.2/html/portfolio/single-page-simple.html">
                    <img class="rounded" src="./Template_files/img29.jpg" alt="Image Description">
                    <div class="py-3">
                        <h4 class="h6 text-dark mb-0">Remind Me More</h4>
                        <p class="small mb-0">
                            by Tiberiu Neamu
                        </p>
                    </div>
                </a>
            </div>
        </div>

    </div>
    <script>
        $(function () {
            $("#test").cubeportfolio({
                layoutMode: "grid",
                animationType: "quicksand",
                filterDeeplinking: true,
                gapHorizontal: 120,
                gapVertical :120,
                caption:  'overlayBottomAlong',
                mediaQueries: [{
                    "width": 1500,
                    "cols": 4
                }, {
                    "width": 1100,
                    "cols": 4
                }, {
                    "width": 800,
                    "cols": 3
                }, {
                    "width": 480,
                    "cols": 2
                }, {
                    "width": 300,
                    "cols": 1
                }],
                filters: $("#filterControls"),
            })
        })
    </script>
</body>

</html>